<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>hello</title>

  <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js"></script>

  <style>
    #photo {
      background-color: #27b5ee;
      width: 400px;
      height: 266px;
      display: flex;
      align-items: center;
      justify-content: center;
      /*gap: 10px;*/
    }

    img {
      width: 260px;
      /*border: 1px solid white;*/
    }

    span {
      height: 266px;
      line-height: 366px;
      font-size: 100px;
      font-weight: bolder;
      color: white;
      font-style: italic;
    }
  </style>
</head>

<body>
<div id="photo">
  <img src="img/toutiao.png">
  <!--  <span>今日头条</span>-->
</div>


<div style="margin: 10px;">
  <button onclick="takeshot()">生成截图</button>
</div>

<div id="output"></div>

<script type="text/javascript">
  function takeshot() {
    let div = document.getElementById('photo');

    html2canvas(div).then(function (canvas) {
      document.getElementById('output').appendChild(canvas);
    })
  }
</script>
</body>

</html>